<template>
  <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, 0.4);width: 800px; ">
    <div style="height: 20px"></div>
    <div style="margin-left: 25px">
      <el-breadcrumb separator="/" style="font-size: 15px;">
        <el-breadcrumb-item :to="{path: '/person/setting'}">账号设置</el-breadcrumb-item>
        <el-breadcrumb-item> {{this.$route.name != '账号设置' ? this.$route.name : ''}} </el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <div style="margin-top: 40px">
      <el-form
          class="phone-form"
          ref="form"
          :model="form"
          size="small"
          :rules="rules"
          label-position="left"
          label-width="150px"
      >
        <el-form-item
            prop="phoneNum"
            :rules="rules.phoneNum"
            ref="phone"
        >
          <el-input
              size="mini"
              placeholder="请输入邮箱"
              v-model="form.phoneNum"
              class="input-with-select"
              style="width: 500px; float: left"
          >
          </el-input>
        </el-form-item>
        <el-form-item
            prop="checkCode"
        >
          <el-input
              class="check-code-box"
              size="small"
              v-model.number="form.checkCode"
              placeholder="请输入验证码"
              style="width: 500px; float: left"
          >
            <el-button :disabled="codeCd" size="small" slot="append" @click="handleCaptcha('form')"
            >获取验证码
              <span v-if="codeCd">({{long}})</span>
            </el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </div>


    <div style="padding-bottom: 50px; margin-left: -58px; margin-top: 50px">
      <el-button type="primary" @click="submitForm()" size="small">确定</el-button>
      <router-link :to="{path: '/person/setting'}">
        <el-button style="margin-left: 25px" @click="resetForm()" size="small">取消</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "EmailModify",
  data () {
    return {
      // 验证码是否CD
      codeCd: false,
      // CD长度
      long: 60,
      form: {
        phoneNum: null,
        checkCode: null
      },
      rules: {
        checkCode: [
          { required: true, message: '验证码不能为空哦！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取邮箱验证码
    handleCaptcha (form) {
      this.$refs[form].validateField('phoneNum', async (valid) => {
        if (!valid) {
          // todo 调用后端发送邮箱验证码接口

          // 开启计时
          this.codeCd = true
          const timer = setInterval(() => {
            this.long--
            if (this.long <= 0) {
              this.long = 60
              this.codeCd = false
              clearInterval(timer)
            }
          }, 1000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>


</style>